<template>
  <view class="merchant-menu-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="top-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="back-icon">←</text>
        </view>
        <text class="merchant-name">{{ merchantInfo.name }}</text>
        <view class="placeholder"></view>
      </view>
    </view>
    
    <!-- 商家信息栏 -->
    <view class="merchant-info-section">
      <image 
        :src="merchantInfo.logo" 
        mode="aspectFill" 
        class="merchant-logo"
        @error="onLogoError"
      />
      <view class="merchant-details">
        <view class="merchant-name-row">
          <text class="name">{{ merchantInfo.name }}</text>
          <view class="status-badge" :class="{ 'closed': merchantInfo.status !== 1 }">
            <text class="status-text">{{ merchantInfo.status === 1 ? '营业中' : '休息中' }}</text>
          </view>
        </view>
        <view class="rating-row" @click="goToReviews">
          <text class="rating">⭐ {{ merchantInfo.rating }}</text>
          <text class="rating-count">{{ merchantInfo.ratingCount }}评价</text>
          <text class="view-reviews-icon">→</text>
        </view>
        <view class="delivery-row">
          <text class="delivery-info">起送¥{{ merchantInfo.minOrderAmount }}</text>
          <text class="delivery-divider">|</text>
          <text class="delivery-info">配送¥{{ merchantInfo.deliveryFee }}</text>
        </view>
      </view>
    </view>
    
    <!-- 主体内容区域 -->
    <view class="content-section">
      <!-- 左侧分类导航 -->
      <scroll-view class="category-nav" scroll-y>
        <view 
          class="category-item" 
          v-for="(category, index) in activeCategories" 
          :key="category.id"
          :class="{ 'active': activeCategoryIndex === index }"
          @click="selectCategory(index)"
        >
          <text class="category-name">{{ category.name }}</text>
          <view class="category-indicator" v-if="activeCategoryIndex === index"></view>
        </view>
      </scroll-view>
      
      <!-- 右侧菜品列表 -->
      <scroll-view 
        class="food-list" 
        scroll-y
        :scroll-into-view="scrollIntoView"
        scroll-with-animation
        @scroll="onFoodListScroll"
      >
        <view 
          v-for="category in activeCategories" 
          :key="category.id"
          :id="'category-' + category.id"
          class="food-category-section"
        >
          <view class="category-title">{{ category.name }}</view>
          <view 
            class="food-item" 
            v-for="food in getFoodsByCategory(category.id)" 
            :key="food.id"
          >
            <image :src="food.image" mode="aspectFill" class="food-image" />
            <view class="food-info">
              <text class="food-name">{{ food.name }}</text>
              <text class="food-sold" v-if="food.sold">已售{{ food.sold }}份</text>
              <view class="food-price-row">
                <view class="price-container">
                  <text class="current-price">¥{{ food.price }}</text>
                  <text class="original-price" v-if="food.originalPrice">¥{{ food.originalPrice }}</text>
                </view>
              </view>
            </view>
            <view class="food-actions">
              <view class="quantity-control" v-if="getCartQuantity(food.id) > 0">
                <view class="minus-btn" @click="decreaseQuantity(food)">
                  <text class="minus-icon">-</text>
                </view>
                <text class="quantity">{{ getCartQuantity(food.id) }}</text>
              </view>
              <view class="plus-btn" @click="increaseQuantity(food, $event)">
                <text class="plus-icon">+</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部购物车栏 -->
    <view class="cart-bar">
      <view class="cart-info" @click="toggleCart">
        <view class="cart-icon-container" :class="{ 'shake': cartShake }">
          <text class="cart-icon">🛒</text>
          <view class="cart-badge" v-if="totalQuantity > 0">
            <text class="badge-text">{{ totalQuantity }}</text>
          </view>
        </view>
        <view class="cart-price">
          <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
          <text class="delivery-fee-text">配送费¥{{ merchantInfo.deliveryFee }}</text>
        </view>
      </view>
      <view class="cart-actions">
        <!-- 发起拼团按钮 -->
        <view 
          class="group-btn" 
          :class="{ 'disabled': !canStartGroup }"
          @click="handleStartGroup"
        >
          <text class="btn-text">
            {{ canStartGroup ? '发起拼团' : '仅限单品' }}
          </text>
        </view>
        
        <!-- 去结算按钮 -->
        <view 
          class="checkout-btn" 
          :class="{ 'disabled': totalPrice < merchantInfo.minOrderAmount }"
          @click="handleCheckout"
        >
          <text class="checkout-text">
            {{ totalPrice < merchantInfo.minOrderAmount ? `还差¥${(merchantInfo.minOrderAmount - totalPrice).toFixed(2)}起送` : '去结算' }}
          </text>
        </view>
      </view>
    </view>
    
    <!-- 飞行的小球动画 -->
    <view 
      v-for="ball in flyingBalls" 
      :key="ball.id"
      class="flying-ball"
      :style="{
        left: ball.x + 'px',
        top: ball.y + 'px',
        opacity: ball.opacity
      }"
    ></view>
    
    <!-- 购物车弹窗 -->
    <view class="cart-modal-mask" v-if="showCart" @click="toggleCart">
      <view class="cart-modal" @click.stop>
        <view class="cart-header">
          <text class="cart-title">已选商品</text>
          <text class="clear-btn" @click="clearCart">清空</text>
        </view>
        <scroll-view class="cart-items" scroll-y>
          <view class="cart-item" v-for="item in cartItems" :key="item.id">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-controls">
              <view class="item-price">¥{{ item.price }}</view>
              <view class="item-quantity-control">
                <view class="minus-btn-small" @click="decreaseQuantity(item)">
                  <text class="minus-icon-small">-</text>
                </view>
                <text class="quantity-small">{{ item.quantity }}</text>
                <view class="plus-btn-small" @click="increaseQuantity(item, $event)">
                  <text class="plus-icon-small">+</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- ⭐ 口味选择半屏弹窗 -->
    <view class="spice-modal-mask" v-if="spiceModalVisible" @click="closeSpiceModal"></view>
    <view class="spice-modal" v-if="spiceModalVisible" @click.stop>
      <view class="spice-header">
        <view class="drag-bar"></view>
        <view class="spice-top">
          <image 
            :src="currentFood?.image || '/static/food1.jpg'" 
            mode="aspectFill" 
            class="spice-thumb" 
          />
          <view class="spice-info-wrap">
            <text class="spice-name">{{ currentFood?.name || '商品' }}</text>
            <view class="spice-price-row">
              <text class="spice-price-symbol">¥</text>
              <text class="spice-price-value">{{ currentFood?.price || '0' }}</text>
              <text class="spice-original" v-if="currentFood?.originalPrice">
                原价 ¥{{ currentFood.originalPrice }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="spice-body">
        <!-- 口味选择 -->
        <view class="spice-row">
          <text class="spice-label">选择口味</text>
        </view>
        <view class="spice-chips">
          <view 
            v-for="(opt, idx) in spiceOptions" 
            :key="idx" 
            class="spice-chip" 
            :class="{ active: selectedSpiceIndex === idx }"
            @click="selectSpice(idx)"
          >
            {{ opt }}
          </view>
        </view>
      </view>

      <view class="spice-footer">
        <button class="spice-confirm-btn" @click="confirmSpiceSelection">
          <text class="spice-confirm-text">确定</text>
        </button>
      </view>
    </view>
    
    <!-- 自定义弹窗 -->
    <CustomModal ref="customModal" />
    
    <!-- ⭐ 拼团设置弹窗（优化版） -->
    <view class="group-setting-mask" v-if="groupSettingVisible" @click="closeGroupSetting"></view>
    <view class="group-setting-modal" v-if="groupSettingVisible" @click.stop>
      <view class="group-setting-header">
        <view class="drag-bar"></view>
        <text class="group-setting-title">🎉 发起拼团</text>
      </view>
      
      <scroll-view class="group-setting-body" scroll-y>
        <!-- 商品信息卡片 -->
        <view class="food-info-card">
          <image 
            :src="cartItems[0]?.image || '/static/food1.jpg'" 
            mode="aspectFill" 
            class="food-thumb"
          />
          <view class="food-details">
            <text class="food-name-text">{{ cartItems[0]?.name || '商品' }}</text>
            <text class="food-spice-text">口味：{{ cartItems[0]?.spiceLevel || '不辣' }}</text>
            <text class="food-quantity-text">数量：{{ cartItems[0]?.quantity || 1 }}份</text>
          </view>
        </view>
        
        <!-- 拼团人数控制 -->
        <view class="setting-section">
          <view class="setting-label">
            <text class="label-text">拼团人数</text>
          </view>
          <view class="counter-control">
            <view class="counter-btn" @click="decreaseParticipants">
              <text class="counter-icon">-</text>
            </view>
            <view class="counter-display">
              <text class="counter-number">{{ groupSetting.participants }}</text>
              <text class="counter-unit">人成团</text>
            </view>
            <view class="counter-btn" @click="increaseParticipants">
              <text class="counter-icon">+</text>
            </view>
          </view>
          <view class="setting-tip">
            <text class="tip-text">最少2人，当前设置{{ groupSetting.participants }}人成团</text>
          </view>
        </view>
        
        <!-- 拼团时长控制 -->
        <view class="setting-section">
          <view class="setting-label">
            <text class="label-text">拼团时长</text>
          </view>
          <view class="counter-control">
            <view class="counter-btn" @click="decreaseDuration">
              <text class="counter-icon">-</text>
            </view>
            <view class="counter-display">
              <text class="counter-number">{{ groupSetting.durationHours }}</text>
              <text class="counter-unit">小时内</text>
            </view>
            <view class="counter-btn" @click="increaseDuration">
              <text class="counter-icon">+</text>
            </view>
          </view>
          <view class="duration-presets">
            <view 
              v-for="hour in [6, 12, 24, 48, 72]" 
              :key="hour"
              class="preset-chip" 
              :class="{ active: groupSetting.durationHours === hour }"
              @click="groupSetting.durationHours = hour"
            >
              {{ hour }}h
            </view>
          </view>
        </view>
        
        <!-- 拼团价展示 -->
        <view class="setting-section">
          <view class="setting-label">
            <text class="label-text">拼团价（每份）</text>
          </view>
          <view class="price-display-card">
            <view class="price-row">
              <text class="price-label">原价</text>
              <text class="original-price-text">¥{{ cartItems[0]?.price || 0 }}</text>
            </view>
            <view class="price-row main">
              <text class="price-label">拼团价</text>
              <text class="group-price-text">¥{{ cartItems[0]?.price || 0 }}</text>
            </view>
          </view>
          <view class="setting-tip">
            <text class="tip-text">💡 拼团价与原价相同，人多更实惠</text>
          </view>
        </view>
      </scroll-view>
      
      <view class="group-setting-footer">
        <button class="cancel-btn" @click="closeGroupSetting">取消</button>
        <button class="confirm-btn" @click="confirmGroupSetting">立即发起</button>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../services/api.js'
import CustomModal from '../../components/CustomModal.vue'

export default {
  components: {
    CustomModal
  },
  data() {
    return {
      statusBarHeight: 0,
      activeCategoryIndex: 0,
      scrollIntoView: '',
      showCart: false,
      cart: {}, // { foodId: { quantity, spiceLevel } }
      categoryPositions: [], // 存储每个分类区域的位置信息
      isScrollingByClick: false, // 标记是否是点击分类触发的滚动
      
      // ⭐ 口味选择
      spiceOptions: ['不辣', '微辣', '中辣', '重辣'],
      spiceModalVisible: false, // 口味选择弹窗
      currentFood: null, // 当前选择口味的商品
      selectedSpiceIndex: 0, // 当前选择的口味索引
      pendingEvent: null, // 待处理的飞入动画事件
      
      // ⭐ 购物车动画相关
      flyingBalls: [], // 飞行中的小球列表
      nextBallId: 0, // 小球ID计数器
      cartShake: false, // 购物车抖动状态
      
      // ⭐ 拼团设置弹窗
      groupSettingVisible: false, // 拼团设置弹窗显示状态
      groupSetting: {
        participants: 3,     // 成团人数（默认3人）
        durationHours: 24,   // 拼团时长（小时，默认24）
        groupPrice: 0        // 拼团价（只读，使用商品原价）
      },
      
      // ⭐ 商家数据（从后端API加载）
      merchantInfo: {
        id: null,
        name: '',
        logo: '',
        rating: 0,
        ratingCount: 0,
        minOrderAmount: 0,
        deliveryFee: 0,
        status: 1
      },
      
      // ⭐ 分类数据（从后端API加载）
      categories: [],
      
      // ⭐ 菜品数据（从后端API加载）
      foods: []
      
      /* ===== 模拟数据已废弃，保留作为参考 =====
      merchantInfo: {
        id: 1,
        name: '渔味鲜楼',
        logo: '/static/merchant-logo.jpg',
        rating: 4.8,
        ratingCount: 1255,
        minOrderAmount: 20,
        deliveryFee: 4,
        status: 1
      },
      categories: [
        { id: 1, name: '热菜' },
        { id: 2, name: '凉菜' },
        { id: 3, name: '汤品' },
        { id: 4, name: '主食' }
      ],
      foods: [
        { id: 1, categoryId: 1, name: '野生大翘嘴', price: 29.95, originalPrice: 59.90, image: '/static/food1.jpg', sold: 131 },
        { id: 2, categoryId: 1, name: '卵泡排骨', price: 27.54, originalPrice: 45.90, image: '/static/food2.jpg', sold: 93 },
        { id: 3, categoryId: 1, name: '宫保鸡丁', price: 18.80, originalPrice: 28.80, image: '/static/food5.jpg', sold: 169 },
        { id: 4, categoryId: 2, name: '清蒸鲈鱼', price: 28.80, originalPrice: 45.00, image: '/static/food7.jpg', sold: 74 },
        { id: 5, categoryId: 2, name: '凉拌黄瓜', price: 8.00, originalPrice: null, image: '/static/food1.jpg', sold: 256 },
        { id: 6, categoryId: 3, name: '番茄蛋花汤', price: 12.00, originalPrice: null, image: '/static/food2.jpg', sold: 89 },
        { id: 7, categoryId: 3, name: '紫菜汤', price: 10.00, originalPrice: null, image: '/static/food3.jpg', sold: 45 },
        { id: 8, categoryId: 4, name: '白米饭', price: 2.00, originalPrice: null, image: '/static/food4.jpg', sold: 567 },
        { id: 9, categoryId: 4, name: '炒饭', price: 15.00, originalPrice: null, image: '/static/food6.jpg', sold: 234 }
      ]
      ===== */
    }
  },
  
  computed: {
    // 购物车商品列表
    cartItems() {
      return Object.keys(this.cart)
        .filter(foodId => this.cart[foodId] && this.cart[foodId].quantity > 0)
        .map(foodId => {
          const food = this.foods.find(f => f.id === parseInt(foodId))
          const cartData = this.cart[foodId]
          return {
            ...food,
            quantity: cartData.quantity,
            spiceLevel: cartData.spiceLevel
          }
        })
    },
    
    // 购物车总数量
    totalQuantity() {
      return Object.values(this.cart).reduce((sum, cartData) => {
        return sum + (cartData?.quantity || 0)
      }, 0)
    },
    
    // 购物车总价
    totalPrice() {
      return this.cartItems.reduce((sum, item) => {
        return sum + item.price * item.quantity
      }, 0)
    },
    
    // 判断是否只有一种商品（用于拼团）
    isSingleFoodType() {
      const uniqueFoodIds = [...new Set(this.cartItems.map(item => item.id))]
      return uniqueFoodIds.length === 1 && this.cartItems.length > 0
    },
    
    // 拼团按钮是否可用（拼团不需要起送价限制）
    canStartGroup() {
      return this.isSingleFoodType
    },
    
    // ⭐ 过滤出有菜品的分类（只显示有菜的分类）
    activeCategories() {
      return this.categories.filter(cat => {
        return this.foods.some(food => food.categoryId === cat.id)
      })
    }
  },
  
  onLoad(options) {
    this.getStatusBarHeight()
    
    // ⭐ 接收商家ID并加载数据
    if (options.merchantId) {
      this.merchantInfo.id = options.merchantId
      this.loadMerchantData(options.merchantId)
    }
  },
  
  onReady() {
    // 页面渲染完成后，计算每个分类区域的位置
    this.$nextTick(() => {
      setTimeout(() => {
        this.calculateCategoryPositions()
      }, 300) // 延迟一下确保DOM完全渲染
    })
  },
  
  methods: {
    /**
     * ⭐ 加载商家数据（从后端API）
     */
    async loadMerchantData(merchantId) {
      try {
        uni.showLoading({ title: '加载中...', mask: true })
        
        // 并发请求三个接口
        const [merchantRes, categoriesRes, foodsRes] = await Promise.all([
          api.get(`/merchants/${merchantId}`, {}, { needAuth: false }),
          api.get('/categories', {}, { needAuth: false }),
          api.get(`/merchants/${merchantId}/foods`, {}, { needAuth: false })
        ])
        
        console.log('📦 商家详情:', merchantRes)
        console.log('📦 分类列表:', categoriesRes)
        console.log('📦 菜品列表:', foodsRes)
        
        // 处理商家信息
        if (merchantRes.code === 200 && merchantRes.data) {
          const data = merchantRes.data
          this.merchantInfo = {
            id: data.id,
            name: data.name || '',
            logo: this.getFullImageUrl(data.logo) || '/static/merchant-logo.jpg',
            rating: data.rating || 0,
            ratingCount: data.ratingCount || 0,
            minOrderAmount: data.minOrderAmount || 0,
            deliveryFee: data.deliveryFee || 0,
            status: data.status || 1
          }
        }
        
        // 处理分类列表（后端已排序）
        if (categoriesRes.code === 200 && categoriesRes.data) {
          this.categories = categoriesRes.data.map(cat => ({
            id: cat.id,
            name: cat.name
          }))
        }
        
        // 处理菜品列表（后端已过滤下架商品）
        if (foodsRes.code === 200 && foodsRes.data) {
          this.foods = foodsRes.data.map(food => ({
            id: food.id,
            categoryId: food.categoryId,
            name: food.name,
            price: food.price,
            originalPrice: food.originalPrice || null,
            image: this.getFullImageUrl(food.image) || '/static/food1.jpg',
            sold: food.soldCount || 0
          }))
        }
        
        uni.hideLoading()
        
        // ⭐ 数据加载完成后，重新计算分类位置
        this.$nextTick(() => {
          setTimeout(() => {
            this.calculateCategoryPositions()
          }, 300)
        })
        
        console.log('✅ 数据加载完成')
        
      } catch (error) {
        console.error('❌ 加载商家数据失败:', error)
        uni.hideLoading()
        
        this.$refs.customModal.show({
          type: 'danger',
          title: '加载失败',
          content: error.message || '数据加载失败，请稍后重试',
          confirmText: '重试',
          cancelText: '返回',
          onConfirm: () => {
            this.loadMerchantData(merchantId)
          },
          onCancel: () => {
            uni.navigateBack()
          }
        })
      }
    },
    
    /**
     * ⭐ 统一处理图片路径
     */
    getFullImageUrl(image) {
      if (!image) return ''
      // 如果已经是完整URL，直接返回
      if (image.startsWith('http://') || image.startsWith('https://')) {
        return image
      }
      // 否则拼接域名（相对路径）
      return `http://localhost:8080${image}`
    },
    
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
      
      // H5环境下设置CSS变量
      // #ifdef H5
      if (typeof document !== 'undefined') {
        document.documentElement.style.setProperty('--status-bar-height', this.statusBarHeight + 'px')
      }
      // #endif
    },
    
    // Logo加载失败处理
    onLogoError() {
      this.merchantInfo.logo = '/static/default-merchant.jpg'
    },
    
    // 返回
    goBack() {
      const pages = getCurrentPages()
      // 如果只有当前页面（说明是直接访问或刷新的），跳转到首页
      if (pages.length <= 1) {
        uni.reLaunch({
          url: '/pages/home/home'
        })
      } else {
        // 否则返回上一页
        uni.navigateBack()
      }
    },
    
    // 查看评价
    goToReviews() {
      if (!this.merchantInfo.id) {
        uni.showToast({
          title: '商家信息加载中',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/reviews/reviews?merchantId=${this.merchantInfo.id}`
      })
    },
    
    // 根据分类ID获取菜品
    getFoodsByCategory(categoryId) {
      return this.foods.filter(food => food.categoryId === categoryId)
    },
    
    // 计算每个分类区域的位置
    calculateCategoryPositions() {
      const query = uni.createSelectorQuery().in(this)
      
      this.activeCategories.forEach((category, index) => {
        query.select(`#category-${category.id}`).boundingClientRect()
      })
      
      query.exec((res) => {
        if (res && res.length > 0) {
          this.categoryPositions = res.map((rect, index) => ({
            index: index,
            top: rect ? rect.top : 0,
            height: rect ? rect.height : 0
          }))
          console.log('分类位置信息:', this.categoryPositions)
        }
      })
    },
    
    // 选择分类
    selectCategory(index) {
      this.activeCategoryIndex = index
      const categoryId = this.activeCategories[index].id
      this.scrollIntoView = 'category-' + categoryId
      
      // 设置标记，表示是点击触发的滚动
      this.isScrollingByClick = true
      
      // 500ms后重置标记
      setTimeout(() => {
        this.isScrollingByClick = false
      }, 500)
    },
    
    // 监听菜品列表滚动（实现滚动联动）
    onFoodListScroll(e) {
      // 如果是点击分类触发的滚动，不自动切换高亮
      if (this.isScrollingByClick) {
        return
      }
      
      // 获取滚动位置
      const scrollTop = e.detail.scrollTop
      
      // 如果还没有计算位置信息，先计算
      if (this.categoryPositions.length === 0) {
        this.calculateCategoryPositions()
        return
      }
      
      // 根据滚动位置判断当前应该高亮哪个分类
      // 使用偏移量，让分类提前高亮（滚动到分类顶部往下100rpx时就高亮）
      const offset = 100
      
      for (let i = this.categoryPositions.length - 1; i >= 0; i--) {
        const position = this.categoryPositions[i]
        // 计算相对于scroll-view的位置
        const categoryTop = position.top - this.categoryPositions[0].top
        
        if (scrollTop >= categoryTop - offset) {
          if (this.activeCategoryIndex !== i) {
            this.activeCategoryIndex = i
          }
          break
        }
      }
    },
    
    // 获取购物车中商品数量
    // 获取购物车中指定商品的数量
    getCartQuantity(foodId) {
      return this.cart[foodId]?.quantity || 0
    },
    
    // 增加商品数量
    // ⭐ 增加数量（支持口味选择）
    increaseQuantity(food, event) {
      // 如果购物车中没有这个商品，弹出口味选择
      if (!this.cart[food.id]) {
        this.showSpiceSelector(food, event)
      } else {
        // 已有商品，直接增加数量
        this.cart[food.id].quantity++
        
        // ⭐ 触发飞入动画
        this.startFlyAnimation(event)
        
        uni.showToast({
          title: '已添加到购物车',
          icon: 'none',
          duration: 800
        })
      }
    },
    
    // ⭐ 显示口味选择器（自定义弹窗）
    showSpiceSelector(food, event) {
      this.currentFood = food
      this.selectedSpiceIndex = 0 // 默认选择第一个口味
      this.pendingEvent = event // 保存事件用于后续飞入动画
      this.spiceModalVisible = true
    },
    
    // ⭐ 选择口味
    selectSpice(index) {
      this.selectedSpiceIndex = index
    },
    
    // ⭐ 确认口味选择
    confirmSpiceSelection() {
      const spiceLevel = this.spiceOptions[this.selectedSpiceIndex]
      
      // 添加到购物车
      this.$set(this.cart, this.currentFood.id, {
        quantity: 1,
        spiceLevel: spiceLevel
      })
      
      // 关闭弹窗
      this.spiceModalVisible = false
      
      // ⭐ 触发飞入动画
      if (this.pendingEvent) {
        this.startFlyAnimation(this.pendingEvent)
      }
      
      uni.showToast({
        title: `已添加${spiceLevel}口味`,
        icon: 'none',
        duration: 800
      })
      
      // 清理
      this.currentFood = null
      this.pendingEvent = null
    },
    
    // ⭐ 关闭口味弹窗
    closeSpiceModal() {
      this.spiceModalVisible = false
      this.currentFood = null
      this.pendingEvent = null
    },
    
    // ⭐ 开始飞入动画
    async startFlyAnimation(event) {
      // 获取点击位置（优先从 target 元素获取位置）
      let startX, startY
      
      // 尝试从事件对象获取点击位置
      if (event.clientX !== undefined) {
        // H5 环境
        startX = event.clientX
        startY = event.clientY
      } else if (event.touches && event.touches[0]) {
        // 触摸事件
        startX = event.touches[0].clientX
        startY = event.touches[0].clientY
      } else if (event.detail) {
        // 小程序环境
        startX = event.detail.x
        startY = event.detail.y
      } else {
        // 兜底：从目标元素获取位置
        const rect = event.currentTarget.getBoundingClientRect()
        startX = rect.left + rect.width / 2
        startY = rect.top + rect.height / 2
      }
      
      // 获取购物车图标位置
      const query = uni.createSelectorQuery().in(this)
      query.select('.cart-icon-container').boundingClientRect()
      query.exec((res) => {
        if (res[0]) {
          const cartRect = res[0]
          const endX = cartRect.left + cartRect.width / 2
          const endY = cartRect.top + cartRect.height / 2
          
          // 创建飞行小球
          const ballId = this.nextBallId++
          const ball = {
            id: ballId,
            x: startX,
            y: startY,
            opacity: 1
          }
          
          this.flyingBalls.push(ball)
          
          // 执行抛物线动画
          this.animateBall(ball, startX, startY, endX, endY)
        }
      })
    },
    
    // ⭐ 执行小球抛物线动画
    animateBall(ball, startX, startY, endX, endY) {
      const duration = 600 // 动画持续时间(ms)
      const startTime = Date.now()
      const ballId = ball.id
      
      const animate = () => {
        const currentTime = Date.now()
        const elapsed = currentTime - startTime
        const progress = Math.min(elapsed / duration, 1) // 0 到 1
        
        // 计算新位置
        const newX = startX + (endX - startX) * progress
        const h = -200 // 抛物线最高点偏移
        const newY = startY + (endY - startY) * progress + h * Math.sin(progress * Math.PI)
        const newOpacity = 1 - progress * 0.3
        
        // 找到并更新小球（Vue 2/3 兼容方式）
        const index = this.flyingBalls.findIndex(b => b.id === ballId)
        if (index > -1) {
          // 直接修改属性（Vue 会追踪）
          this.flyingBalls[index].x = newX
          this.flyingBalls[index].y = newY
          this.flyingBalls[index].opacity = newOpacity
        }
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        } else {
          // 动画结束，移除小球
          const finalIndex = this.flyingBalls.findIndex(b => b.id === ballId)
          if (finalIndex > -1) {
            this.flyingBalls.splice(finalIndex, 1)
          }
          
          // 触发购物车抖动
          this.shakeCart()
        }
      }
      
      requestAnimationFrame(animate)
    },
    
    // ⭐ 购物车抖动效果
    shakeCart() {
      this.cartShake = true
      setTimeout(() => {
        this.cartShake = false
      }, 500)
    },
    
    // 减少商品数量
    // 减少数量
    decreaseQuantity(food) {
      if (this.cart[food.id] && this.cart[food.id].quantity > 0) {
        this.cart[food.id].quantity--
        if (this.cart[food.id].quantity === 0) {
          this.$delete(this.cart, food.id)
        }
      }
    },
    
    // 切换购物车弹窗
    toggleCart() {
      if (this.totalQuantity === 0) {
        uni.showToast({
          title: '购物车是空的',
          icon: 'none',
          duration: 1500
        })
        return
      }
      this.showCart = !this.showCart
    },
    
    // 清空购物车
    clearCart() {
      this.$refs.customModal.show({
        type: 'warning',
        title: '提示',
        content: '确定清空购物车吗？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm: () => {
          this.cart = {}
          this.showCart = false
          uni.showToast({
            title: '已清空',
            icon: 'success',
            duration: 1500
          })
        }
      })
    },
    
    // 发起拼团（打开设置弹窗）
    handleStartGroup() {
      if (!this.canStartGroup) {
        uni.showToast({
          title: '仅限单品发起拼团',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 重置拼团设置为默认值
      const food = this.cartItems[0]
      this.groupSetting = {
        participants: 3,         // 默认3人成团
        durationHours: 24,       // 默认24小时
        groupPrice: food.price   // 使用商品原价
      }
      
      // 显示拼团设置弹窗
      this.groupSettingVisible = true
    },
    
    // ⭐ 增加拼团人数
    increaseParticipants() {
      if (this.groupSetting.participants < 20) {
        this.groupSetting.participants++
      } else {
        uni.showToast({
          title: '最多20人成团',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // ⭐ 减少拼团人数
    decreaseParticipants() {
      if (this.groupSetting.participants > 2) {
        this.groupSetting.participants--
      } else {
        uni.showToast({
          title: '最少2人成团',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // ⭐ 增加拼团时长
    increaseDuration() {
      const presets = [6, 12, 24, 48, 72]
      const currentIndex = presets.indexOf(this.groupSetting.durationHours)
      
      if (currentIndex < presets.length - 1) {
        this.groupSetting.durationHours = presets[currentIndex + 1]
      } else {
        uni.showToast({
          title: '最长72小时',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // ⭐ 减少拼团时长
    decreaseDuration() {
      const presets = [6, 12, 24, 48, 72]
      const currentIndex = presets.indexOf(this.groupSetting.durationHours)
      
      if (currentIndex > 0) {
        this.groupSetting.durationHours = presets[currentIndex - 1]
      } else {
        uni.showToast({
          title: '最短6小时',
          icon: 'none',
          duration: 1500
        })
      }
    },
    
    // ⭐ 确认拼团设置
    confirmGroupSetting() {
      const food = this.cartItems[0]
      const totalQuantity = this.cartItems.reduce((sum, item) => sum + item.quantity, 0)
      
      // 验证人数
      if (this.groupSetting.participants < 2) {
        uni.showToast({
          title: '最少需要2人拼团',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 关闭弹窗并跳转
      this.groupSettingVisible = false
      
      // 跳转到订单页，携带完整的拼团参数
      const groupTitle = `${food.name} ${this.groupSetting.participants}人团`
      
      uni.navigateTo({
        url: `/pages/order/order?type=create_group` +
             `&foodId=${food.id}` +
             `&merchantId=${this.merchantInfo.id}` +
             `&storeName=${encodeURIComponent(this.merchantInfo.name)}` +
             `&name=${encodeURIComponent(food.name)}` +
             `&image=${encodeURIComponent(food.image)}` +
             `&price=${food.price}` +
             `&quantity=${totalQuantity}` +
             `&spice=${encodeURIComponent(food.spiceLevel || '不辣')}` +
             `&totalPrice=${this.totalPrice.toFixed(2)}` +
             `&deliveryFee=${this.merchantInfo.deliveryFee}` +
             `&groupTitle=${encodeURIComponent(groupTitle)}` +
             `&groupSize=${this.groupSetting.participants}` +
             `&durationHours=${this.groupSetting.durationHours}` +
             `&minParticipants=2` +
             `&maxParticipants=${this.groupSetting.participants}` +
             `&groupPrice=${food.price}`
      })
    },
    
    // ⭐ 关闭拼团设置弹窗
    closeGroupSetting() {
      this.groupSettingVisible = false
    },
    
    // 去结算
    handleCheckout() {
      if (this.totalPrice < this.merchantInfo.minOrderAmount) {
        uni.showToast({
          title: `还差¥${(this.merchantInfo.minOrderAmount - this.totalPrice).toFixed(2)}起送`,
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 如果是单商品，直接跳转到订单页（复用现有流程）
      if (this.isSingleFoodType) {
        const food = this.cartItems[0]
        const totalQuantity = this.cartItems.reduce((sum, item) => sum + item.quantity, 0)
        
        uni.navigateTo({
          url: `/pages/order/order?foodId=${food.id}&merchantId=${this.merchantInfo.id}&storeName=${encodeURIComponent(this.merchantInfo.name)}&name=${encodeURIComponent(food.name)}&image=${encodeURIComponent(food.image)}&price=${food.price}&quantity=${totalQuantity}&spice=${encodeURIComponent(food.spiceLevel || '不辣')}&totalPrice=${this.totalPrice.toFixed(2)}&deliveryFee=${this.merchantInfo.deliveryFee}`
        })
      } else {
        // 多商品情况，使用 localStorage 传递数据
        uni.setStorageSync('orderCart', {
          merchantId: this.merchantInfo.id,
          merchantName: this.merchantInfo.name,
          items: this.cartItems,
          totalPrice: this.totalPrice,
          deliveryFee: this.merchantInfo.deliveryFee  // ⭐ 新增配送费
        })
        
        uni.navigateTo({
          url: '/pages/order/order?type=multi'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.merchant-menu-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 100rpx; /* 底部购物车高度 */
}

.status-bar {
  background: #fff;
}

/* 顶部导航栏 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 24rpx;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .back-icon {
        font-size: 40rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .merchant-name {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .placeholder {
      width: 60rpx;
    }
  }
}

/* 商家信息栏 */
.merchant-info-section {
  margin-top: calc(var(--status-bar-height, 20px) + 88rpx);
  background: #fff;
  padding: 30rpx;
  display: flex;
  gap: 24rpx;
  
  .merchant-logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    background: #f0f0f0;
  }
  
  .merchant-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .merchant-name-row {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .status-badge {
        padding: 4rpx 12rpx;
        background: #e8f5e9;
        border-radius: 8rpx;
        
        .status-text {
          font-size: 20rpx;
          color: #4caf50;
          font-weight: 500;
        }
        
        &.closed {
          background: #ffebee;
          
          .status-text {
            color: #f44336;
          }
        }
      }
    }
    
    .rating-row {
      display: flex;
      align-items: center;
      gap: 12rpx;
      cursor: pointer;
      padding: 4rpx 8rpx;
      border-radius: 8rpx;
      transition: background 0.3s ease;
      
      &:active {
        background: rgba(255, 167, 38, 0.1);
      }
      
      .rating {
        font-size: 24rpx;
        color: #ffa726;
      }
      
      .rating-count {
        font-size: 24rpx;
        color: #999;
      }
      
      .view-reviews-icon {
        font-size: 24rpx;
        color: #ffa726;
        margin-left: 4rpx;
      }
    }
    
    .delivery-row {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .delivery-info {
        font-size: 24rpx;
        color: #666;
      }
      
      .delivery-divider {
        font-size: 24rpx;
        color: #ddd;
      }
    }
  }
}

/* 主体内容区域 */
.content-section {
  display: flex;
  height: calc(100vh - var(--status-bar-height, 20px) - 88rpx - 180rpx - 100rpx);
  background: #fff;
  margin-top: 20rpx;
}

/* 左侧分类导航 */
.category-nav {
  width: 160rpx;
  background: #f8f8f8;
  
  .category-item {
    position: relative;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    transition: all 0.3s ease;
    
    .category-name {
      font-size: 26rpx;
      color: #666;
      transition: all 0.3s ease;
    }
    
    .category-indicator {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 40rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 0 4rpx 4rpx 0;
    }
    
    &.active {
      background: #fff;
      
      .category-name {
        color: #667eea;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }
}

/* 右侧菜品列表 */
.food-list {
  flex: 1;
  padding: 0 24rpx;
  
  .food-category-section {
    margin-bottom: 40rpx;
    
    .category-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
      padding: 24rpx 0 16rpx;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 10;
    }
    
    .food-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      .food-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        background: #f0f0f0;
        margin-right: 20rpx;
      }
      
      .food-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .food-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .food-sold {
          font-size: 22rpx;
          color: #999;
          margin-bottom: 12rpx;
        }
        
        .food-price-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .price-container {
            display: flex;
            align-items: baseline;
            gap: 12rpx;
            
            .current-price {
              font-size: 32rpx;
              font-weight: 700;
              color: #ff4757;
            }
            
            .original-price {
              font-size: 24rpx;
              color: #999;
              text-decoration: line-through;
            }
          }
        }
      }
      
      .food-actions {
        display: flex;
        align-items: flex-end;
        gap: 16rpx;
        
        .quantity-control {
          display: flex;
          align-items: center;
          gap: 16rpx;
          
          .minus-btn {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            
            .minus-icon {
              font-size: 32rpx;
              color: #fff;
              font-weight: 600;
            }
          }
          
          .quantity {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            min-width: 40rpx;
            text-align: center;
          }
        }
        
        .plus-btn {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.9);
          }
          
          .plus-icon {
            font-size: 32rpx;
            color: #fff;
            font-weight: 600;
          }
        }
      }
    }
  }
}

/* 底部购物车栏 */
.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  z-index: 998;
  
  .cart-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .cart-icon-container {
      position: relative;
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .cart-icon {
        font-size: 40rpx;
      }
      
      .cart-badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        min-width: 32rpx;
        height: 32rpx;
        background: #ff4757;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;
        
        .badge-text {
          font-size: 20rpx;
          color: #fff;
          font-weight: 600;
        }
      }
    }
    
    .cart-price {
      display: flex;
      flex-direction: column;
      gap: 4rpx;
      
      .total-price {
        font-size: 32rpx;
        font-weight: 700;
        color: #333;
      }
      
      .delivery-fee-text {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
  
  .cart-actions {
    display: flex;
    gap: 16rpx;
    
    .group-btn,
    .checkout-btn {
      flex: 1;
      padding: 20rpx 32rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 40rpx;
      text-align: center;
      
      .btn-text,
      .checkout-text {
        font-size: 28rpx;
        color: #fff;
        font-weight: 600;
      }
      
      &.disabled {
        background: #ddd;
        
        .btn-text,
        .checkout-text {
          color: #999;
        }
      }
    }
    
    .group-btn {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
      
      &.disabled {
        background: #ddd;
      }
    }
  }
}

/* ⭐ 飞行小球动画 */
.flying-ball {
  position: fixed;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.5);
  z-index: 9999;
  pointer-events: none;
  /* 移除 transition，使用 JS 控制动画 */
}

/* ⭐ 购物车抖动动画 */
.cart-icon-container.shake {
  animation: cartShake 0.5s ease-in-out;
}

@keyframes cartShake {
  0%, 100% { transform: translateX(0) scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5rpx) scale(1.1); }
  20%, 40%, 60%, 80% { transform: translateX(5rpx) scale(1.1); }
}

/* 购物车弹窗 */
.cart-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100rpx; /* 不覆盖底部购物车栏 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  
  .cart-modal {
    width: 100%;
    max-height: 60vh;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    padding-bottom: 120rpx;
    
    .cart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .cart-title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
      
      .clear-btn {
        font-size: 26rpx;
        color: #999;
      }
    }
    
    .cart-items {
      max-height: 50vh;
      
      .cart-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 30rpx;
        border-bottom: 1rpx solid #f8f8f8;
        
        .item-name {
          font-size: 28rpx;
          color: #333;
        }
        
        .item-controls {
          display: flex;
          align-items: center;
          gap: 24rpx;
          
          .item-price {
            font-size: 26rpx;
            color: #ff4757;
            font-weight: 600;
          }
          
          .item-quantity-control {
            display: flex;
            align-items: center;
            gap: 16rpx;
            
            .minus-btn-small,
            .plus-btn-small {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              display: flex;
              align-items: center;
              justify-content: center;
              
              .minus-icon-small,
              .plus-icon-small {
                font-size: 28rpx;
                color: #fff;
                font-weight: 600;
              }
            }
            
            .quantity-small {
              font-size: 26rpx;
              font-weight: 600;
              color: #333;
              min-width: 40rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

/* ⭐ 口味选择半屏弹窗样式 */
.spice-modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.spice-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  max-height: 50vh;
  animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.spice-header {
  padding: 16rpx 24rpx 0;
  
  .drag-bar {
    width: 120rpx;
    height: 8rpx;
    background: #eaeaea;
    border-radius: 8rpx;
    margin: 0 auto 16rpx;
  }
  
  .spice-top {
    display: flex;
    gap: 20rpx;
    align-items: center;
    padding-bottom: 20rpx;
  }
  
  .spice-thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  .spice-info-wrap {
    flex: 1;
    min-width: 0;
  }
  
  .spice-name {
    display: block;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 12rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .spice-price-row {
    display: flex;
    align-items: baseline;
    gap: 12rpx;
  }
  
  .spice-price-symbol {
    font-size: 28rpx;
    color: #ff4757;
    font-weight: 700;
  }
  
  .spice-price-value {
    font-size: 42rpx;
    color: #ff4757;
    font-weight: 800;
  }
  
  .spice-original {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
}

.spice-body {
  padding: 20rpx 24rpx;
  flex: 1;
  overflow-y: auto;
  
  .spice-row {
    margin: 16rpx 0;
  }
  
  .spice-label {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
  
  .spice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 16rpx;
  }
  
  .spice-chip {
    padding: 16rpx 32rpx;
    border-radius: 32rpx;
    background: #f5f5f5;
    color: #666;
    font-size: 28rpx;
    transition: all 0.3s ease;
    border: 2rpx solid transparent;
    
    &.active {
      background: linear-gradient(135deg, #ffe6e8 0%, #fff5f5 100%);
      color: #ff4757;
      border-color: #ff4757;
      font-weight: 600;
      transform: scale(1.05);
    }
  }
}

.spice-footer {
  padding: 16rpx 24rpx 24rpx;
  
  .spice-confirm-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    border: none;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
    transition: transform 0.2s ease;
    
    &::after {
      border: none;
    }
    
    &:active {
      transform: scale(0.98);
    }
    
    .spice-confirm-text {
      font-size: 32rpx;
      color: #fff;
      font-weight: 700;
    }
  }
}

/* ⭐ 拼团设置弹窗样式（优化版） */
.group-setting-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4rpx);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.group-setting-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  max-height: 70vh;
  animation: slideUp 0.3s ease;
}

.group-setting-header {
  padding: 16rpx 24rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
  
  .drag-bar {
    width: 120rpx;
    height: 8rpx;
    background: #eaeaea;
    border-radius: 8rpx;
    margin: 0 auto 20rpx;
  }
  
  .group-setting-title {
    display: block;
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    text-align: center;
  }
}

.group-setting-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24rpx 24rpx;
  box-sizing: border-box;
  
  // 商品信息卡片
  .food-info-card {
    display: flex;
    background: linear-gradient(135deg, #fff7ec 0%, #fffaf0 100%);
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 24rpx;
    border: 2rpx solid #ffe0b2;
    box-sizing: border-box;
    width: 100%;
    
    .food-thumb {
      width: 100rpx;
      height: 100rpx;
      border-radius: 16rpx;
      background: #f0f0f0;
      margin-right: 16rpx;
      flex-shrink: 0;
    }
    
    .food-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8rpx;
      
      .food-name-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .food-spice-text,
      .food-quantity-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .setting-section {
    margin-bottom: 24rpx;
    width: 100%;
    box-sizing: border-box;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .setting-label {
    margin-bottom: 20rpx;
    
    .label-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  // 计数器控制
  .counter-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    border-radius: 20rpx;
    padding: 16rpx;
    box-sizing: border-box;
    width: 100%;
    
    .counter-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
      transition: all 0.2s ease;
      flex-shrink: 0;
      
      &:active {
        transform: scale(0.95);
      }
      
      .counter-icon {
        font-size: 36rpx;
        color: #fff;
        font-weight: 600;
      }
    }
    
    .counter-display {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 16rpx;
      
      .counter-number {
        font-size: 44rpx;
        font-weight: 700;
        color: #ff6b6b;
        line-height: 1.2;
      }
      
      .counter-unit {
        font-size: 20rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
  }
  
  .setting-tip {
    margin-top: 16rpx;
    text-align: center;
    
    .tip-text {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  // 时长预设按钮
  .duration-presets {
    display: flex;
    gap: 8rpx;
    margin-top: 16rpx;
    width: 100%;
    box-sizing: border-box;
    
    .preset-chip {
      flex: 1;
      padding: 12rpx 8rpx;
      background: #fff;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      text-align: center;
      font-size: 22rpx;
      color: #666;
      transition: all 0.3s ease;
      
      &.active {
        background: linear-gradient(135deg, #ffe6e8 0%, #fff5f5 100%);
        border-color: #ff6b6b;
        color: #ff6b6b;
        font-weight: 600;
      }
      
      &:active {
        transform: scale(0.95);
      }
    }
  }
  
  // 价格展示卡片
  .price-display-card {
    background: linear-gradient(135deg, #ffe6e8 0%, #fff5f5 100%);
    border-radius: 20rpx;
    padding: 20rpx;
    border: 2rpx solid #ff6b6b;
    box-sizing: border-box;
    width: 100%;
    
    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8rpx 0;
      
      &.main {
        padding-top: 16rpx;
        border-top: 1rpx dashed rgba(255, 107, 107, 0.3);
        margin-top: 8rpx;
      }
      
      .price-label {
        font-size: 26rpx;
        color: #666;
      }
      
      .original-price-text {
        font-size: 28rpx;
        color: #999;
        text-decoration: line-through;
      }
      
      .group-price-text {
        font-size: 40rpx;
        font-weight: 700;
        color: #ff6b6b;
      }
    }
  }
}

.group-setting-footer {
  display: flex;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  flex-shrink: 0;
  
  button {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    border: none;
    font-size: 30rpx;
    font-weight: 600;
    transition: all 0.2s ease;
    
    &::after {
      border: none;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .cancel-btn {
    background: #f5f5f5;
    color: #666;
  }
  
  .confirm-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
  }
}
</style>

